<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 240px;
            background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
            /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
            position: relative;
        }

        .login .personal_logo {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin: 0 auto 9px;
            /*position: absolute; top: 60px; left: 20px;*/
        }

        .login .userinfo {
            position: absolute;
            top: 60px;
            text-align: center;
            left: 0;
            right: 0;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        #shopCenterbg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.3);
            z-index: 12;
            display: none;
        }

        #shopCenterTost {
            position: absolute;
            z-index: 999;
            top: 50%;
            left: 5vw;
            width: 90vw;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            background-color: #fff;
            padding: 1rem;
        }

        .shopCenterTost_txt {
            color: #333;
            text-align: center;
            font-size: 0.8rem;
            margin-top: 0.5rem;
        }

        .shopCenterImg {
            width: 80%;
            margin: 0.5rem auto 0;
        }

        .personMsg_img {
            width: 2rem;
            height: 2rem;
        }

        .content_ul {
            min-height: calc(100vh - 1.5rem);
        }

        .userHead {
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            margin-right: 0.5rem;
            display: inline-block;
        }

        .userNmae {
            display: inline-block;
            vertical-align: top;
        }

        .userNmae>div {
            height: 3.5rem;
            padding: 0.5rem 0;
            font-size: 0.9rem;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-around;
            justify-content: space-around;
            -webkit-box-align: start;
            -webkit-align-items: flex-start;
            align-items: flex-start;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="user_nav_line"></div>
        <div class="aui-refresh-content">
            <div class=" content_ul">
                <ul class="aui-list aui-media-list">
                    <li class="aui-list-item aui-list-item-middle" @click="tast()">
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">我的头像</div>
                                <div class="aui-list-item-right personMsg_img" :style="'background:url('+userImg+') center center/cover no-repeat;'"></div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle" onclick="openNick()">
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">昵称</div>
                                <div class="aui-list-item-right">{{userName}}</div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle" @click="tastone()">
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">性别</div>
                                <div class="aui-list-item-right personGender" v-model="userGender">{{userGender}}</div>
                            </div>
                        </div>
                    </li>
                    <!-- <li class="aui-list-item aui-list-item-middle" onclick="personAddd()"> -->
                    <li class="aui-list-item aui-list-item-middle" @click="addAbout()">
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">地区</div>
                                <div class="aui-list-item-right">{{userAdd}}</div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle" @click="tostCode(0)">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">我的二维码</div>
                                <div class="aui-list-item-right"><img src="../../image/my/m66.png" alt="" class="personMsg_imgone"></div>
                            </div>
                        </div>
                    </li>
                    <li v-if="is_super==1" class="aui-list-item aui-list-item-middle" @click="tostCode(1)">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">店铺二维码</div>
                                <div class="aui-list-item-right"><img src="../../image/my/m66.png" alt="" class="personMsg_imgone"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="user_nav_line"></div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle" @click="get_person_dynamic()">
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">个人动态</div>

                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle" onclick="personStore()">
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">收货地址</div>

                            </div>
                        </div>
                    </li>
                    <li v-if="f_username!=''" class="aui-list-item aui-list-item-middle">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">推荐人</div>
                                <div class="tjr_name" style="color:#666;">{{f_username}}</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div>
            <!--弹框-->
            <div id="shopCenterbg" @click="hiddenTost">
                <div id="shopCenterTost">
                    <div class="shopCenterTost_head">
                        <div class="userHead" :style="'background:url('+userImg+') center center/cover no-repeat;'"></div>
                        <div class="userNmae">
                            <div>
                                <div style="color:#333;">{{userName}}</div>
                                <div style="color:#999;">{{userAdd}}</div>
                            </div>
                        </div>
                    </div>
                    <img src="" class="shopCenterImg">
                    <div class="shopCenterTost_txt">
                        {{code_tip}}
                    </div>
                </div>
            </div>
        </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-popup.js"></script>
<script type="text/javascript" src="../../script/address_data.js"></script>

<script type="text/javascript">
    function personDynamic() {
        //  @click="open_new_win('five',friend_dynamic.username,'朋友动态',friend_dynamic.head_img,friend_dynamic.user_id)"

        api.openWin({
            name: 'headerone',
            url: './dynamic.html',
            pageParam: {}
        });
    }

    function personStore() {
        api.openWin({
            name: 'headerone',
            url: './headerone.html',
            pageParam: {
                msg: '店铺资料',
                url: './storeData.html'
            }
        });
    }

    function personAddd() {
        api.openWin({
            name: 'location',
            url: './location.html'
        })
    }


    function openNick() {
        api.openWin({
            name: 'nickname_list',
            url: './nickname_list.html',

        })
    }

    function openWinInfo(type) {
        api.openWin({
            name: 'userInfo',
            url: './userInfo.html',

        });

    }

    apiready = function() {};

    var popup = new auiPopup();

    function showPopup() {
        popup.show(document.getElementById("top-right"))
    }
    //刷新
</script>
<script>
    apiready = function() {
        new Vue({
            el: '#app',
            data: {
                userImg: '',
                userName: '',
                userGender: '',
                usersex: '',
                userAdd: '',
                user_id: 0,
                f_username: '',
                f_id: '',
                f_head_img: '',
                dp_code: '',
                my_code: '',
                is_super: 0,
                code_tip: '',
                province:'',
                city:'',
                district:''
            },
            methods: {
                hiddenTost: function() {
                    $api.css(shopCenterbg, 'display:none');
                },
                tostCode: function(index) {
                    var _this = this;

                    $api.css(shopCenterbg, 'display:block');
                    if (index == 0) {
                        $('.shopCenterImg').attr("src", _this.my_code);
                        _this.code_tip = '扫一扫上面的二维码图案，添加好友';
                    } else {
                        $('.shopCenterImg').attr("src", _this.dp_code)
                        _this.code_tip = '扫一扫上面的二维码图案,立即付款'
                    }
                },
                tastone: function() {
                    var _this = this;
                    api.actionSheet({
                        title: '性别',
                        cancelTitle: '取消',
                        buttons: ['男', '女']
                    }, function(ret, err) {
                        if (ret.buttonIndex == 2) {
                            _this.userGender = '女';
                        } else if (ret.buttonIndex == 1) {
                            _this.userGender = '男';
                        }
                        _this.usersex = ret.buttonIndex;
                        _this.setUserInfo()
                    });
                },
                setUserInfo: function() {
                    var _this = this;
                    api.ajax({
                        url: window.Url.Freeucenter_setUserInfo,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                sex: _this.usersex,
                                address: _this.userAdd,
                                province:_this.province,
                                city:_this.city,
                                district:_this.district
                            },
                            files: {
                                head_img: _this.userImg
                            }

                        }
                    }, function(ret, err) {
                        if (ret) {
                            console.log(JSON.stringify(ret));
                            api.execScript({
                                name: 'root',
                                frameName: 'five_frame/index.html',
                                script: 'window.location.reload();'
                            });
                        } else {
                            console.log(JSON.stringify(err));
                        }
                    });

                },
                setRefresh: function() {
                    var _this = this;
                    var pullRefresh = new auiPullToRefresh({
                        container: document.querySelector('.aui-refresh-content'),
                        triggerDistance: 100
                    }, function(ret) {
                        _this.personMsg();
                        if (ret.status == "success") {
                            _this.personMsg()
                            setTimeout(function() {
                                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                            }, 500)
                        }
                    })
                },
                personMsg: function() {
                    // console.log($api.getStorage('token'))
                    var _this = this;
                    api.ajax({
                        url: window.Url.Freeucenter_userInfo,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                            }
                        }
                    }, function(ret, err) {
                        if (ret.re == 1) {
                            _this.userImg = ret.data.head_img;
                            _this.userName = ret.data.username;
                            _this.userGender = ret.data.sex;
                            _this.userAdd = ret.data.address;
                            _this.user_id = ret.data.user_id;
                            _this.f_id = ret.data.f_id;
                            _this.f_username = ret.data.f_username;
                            _this.f_head_img = ret.data.f_head_img;

                            _this.is_super = ret.data.is_super;
                            if (ret.data.is_super == 1) {
                                _this.dp_code = ret.data.super_url;
                            }
                            // alert( JSON.stringify( ret.data.f_username ) );
                        } else {
                            alert("请先登录");
                            //  alert( JSON.stringify( err ) );
                        }
                    });
                },
                //修改头像
                tast: function() {
                    var _this = this;
                    api.actionSheet({
                        title: '修改头像',
                        cancelTitle: '取消',
                        buttons: ['图片', '拍照']
                    }, function(ret, err) {
                        if (ret.buttonIndex == 2) {
                            _this.personImg('camera')
                        } else if (ret.buttonIndex == 1) {
                            _this.personImg('library')
                        }
                    });
                },
                personImg: function(type) {
                    var _this = this;
                    api.getPicture({
                        sourceType: type,
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        destinationType: 'url',
                        allowEdit: true,
                        quality: 50,
                        targetWidth: 100,
                        targetHeight: 100,
                        saveToPhotoAlbum: false
                    }, function(ret, err) {
                        if (ret) {
                            //  alert(JSON.stringify(ret));
                            if (ret.data != '') {
                                _this.userImg = ret.data;
                                _this.setUserInfo();
                            }
                        }
                    });

                },
                //我的二维码
                myCode: function() {
                    var _this = this;
                    api.ajax({
                        url: window.Url.Freeucenter_myCode,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token')
                            }
                        }
                    }, function(ret, err) {
                        if (ret.re == 1) {
                            // alert( JSON.stringify( ret ) );
                            // console.log(ret.data.code)
                            // $('.shopCenterImg').attr("src", ret.data.qr_code)
                            _this.my_code = ret.data.qr_code;
                        }
                    });

                },
                get_person_dynamic: function() {
                        $_this = this;
                        api.openWin({
                            name: 'person_dynamic_win',
                            url: '../four_frame/four_headers/four_five_header.html',
                            pageParam: {
                                title: $_this.userName,
                                type: '朋友动态',
                                img_src: $_this.userImg,
                                friend_id: $_this.user_id
                            }
                        });
                    },
                    //详细地址
                addAbout: function() {
                    var _this = this;
                    var UIActionSelector = api.require('UIActionSelector');
                    UIActionSelector.open({
                        datas: address_data,
                        layout: {
                            row: 5,
                            col: 3,
                            height: 60,
                            size: 12,
                            sizeActive: 14,
                            rowSpacing: 5,
                            colSpacing: 10,
                            maskBg: 'rgba(0,0,0,0.2)',
                            bg: '#fff',
                            color: '#888',
                            colorActive: '#f00',
                            colorSelected: '#f00'
                        },
                        animation: true,
                        cancel: {
                            text: '取消',
                            size: 12,
                            w: 90,
                            h: 35,
                            bg: '#fff',
                            bgActive: '#ccc',
                            color: '#888',
                            colorActive: '#fff'
                        },
                        ok: {
                            text: '确定',
                            size: 12,
                            w: 90,
                            h: 35,
                            bg: '#fff',
                            bgActive: '#ccc',
                            color: '#888',
                            colorActive: '#fff'
                        },
                        title: {
                            text: '请选择',
                            size: 12,
                            h: 44,
                            bg: '#eee',
                            color: '#888'
                        },
                        fixedOn: api.frameName
                    }, function(ret, err) {
                        if (ret.eventType == "ok") {
                            _this.userAdd = ''
                            _this.province = ret.level1 || '';
                            _this.city = ret.level2 || '';
                            _this.district = ret.level3 || '';
                                // for(var i in ret.selectedInfo) { _this.usercity += ret.selectedInfo[i].name }
                            _this.userAdd += ret.level1;
                            _this.userAdd += ret.level2 || ' ';
                            _this.userAdd += ret.level3 || ' ';

                            _this.setUserInfo();
                        }
                    });
                },
            },
            mounted: function() {
                this.setRefresh();
                this.personMsg();
                this.myCode();
            }

        })
    }
</script>

</html>
